<template>
  <div>
    <el-dialog
      class="custom-dialog"
      v-model="dialogVisible"
      :title="title"
      width="500px"
      @close="handleClose"
    >
      <el-form
        class="data-form"
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <el-form-item label="服务名称" prop="name">
          <el-input
            class="data-input"
            v-model="form.name"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="服务类型" prop="serviceType">
          <el-select
            class="search-select"
            v-model="form.serviceType"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) of dict['tcfwlx']"
              :key="index"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="服务地址" prop="serviceUrl">
          <el-input
            class="data-input"
            v-model="form.serviceUrl"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="服务编码">
          <el-input
            class="data-input"
            v-model="form.code"
            placeholder="根据服务地址自动生成"
            disabled
          ></el-input>
        </el-form-item> -->
        <el-form-item label="数据服务地址" prop="dataService">
          <el-input
            class="data-input"
            v-model="form.dataService"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="图例服务地址" prop="signService">
          <el-input
            class="data-input"
            v-model="form.signService"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="显示排序" prop="orderIndex">
          <el-input
            class="data-input"
            v-model="form.orderIndex"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="设置默认加载">
          <el-radio-group v-model="form.isDefault">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="form.status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <template #footer>
        <el-button @click="handleClose(false)" :loading="loading"
          >取消</el-button
        >
        <el-button type="primary" @click="handleSubmit" :loading="loading"
          >确定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import {
  layerAdd,
  layerDetail,
  layerEdit,
} from '@/api/manager/dataManage/layerManage.js'
import { useDict } from '@/hooks/useDict'

const { dict, getDictValue, getDictStyle } = useDict(['serviceType', 'tcfwlx'])
defineOptions({
  name: 'AddDialog',
})
const props = defineProps({
  detail: {
    type: Object,
  },
})
const emit = defineEmits(['close'])
const title = ref('')
const dialogVisible = ref(false)
const handleClose = (isFlash) => {
  form.value = {}
  formRef.value.clearValidate()
  dialogVisible.value = false
  emit('close', isFlash)
}
const formRef = ref(null)
const form = ref({})
const rules = ref({
  name: [{ required: true, message: '请输入图层名称', trigger: 'blur' }],
  serviceType: [{ required: true, message: '请选择服务类型', trigger: 'blur' }],
  serviceUrl: [{ required: true, message: '请输入服务地址', trigger: 'blur' }],
})
const loading = ref(false)
const handleSubmit = async () => {
  if (!formRef.value) return
  await formRef.value.validate(async (valid, fields) => {
    if (valid) {
      const params = JSON.parse(JSON.stringify(form.value))
      loading.value = true
      let res
      try {
        if (!form.value.pkid) {
          res = await layerAdd({
            catalogId: props.detail.catalogId,
            resourceServiceInfo: params,
          })
        } else {
          res = await layerEdit(params)
        }
        if (res.success) {
          ElMessage.success('保存成功')
          handleClose(true)
        } else {
          ElMessage.error(res.message)
        }
        loading.value = false
      } catch (error) {
        loading.value = false
      }
    } else {
      ElMessage.warning('请正确录入信息')
      loading.value = false
    }
  })
}
const handleDetail = async () => {
  const res = await layerDetail({ resourceId: props.detail.pkid })
  form.value = res.data
}
watch(
  () => props.detail,
  () => {
    if (props.detail.pkid && dialogVisible.value) {
      handleDetail()
    }
  },
)
defineExpose({ dialogVisible, title })
onMounted(() => {})
</script>
<style lang="scss" scoped></style>
